<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .w{
        width: 1000px;
        margin: 0 auto;
    }
    p{
        color: #B0A3FB;
    }
    input{
        outline: none;
    }
    .box{
        padding: 30px 100px;
    }
    .box input{
        margin: 10px 0;
        width: 300px;
        height: 20px;
    }
</style>
<body>
    <div class="w">
        <form action="" autocomplete="on" onsubmit="return false;">
            <h2>A Simple Form</h2>
            <p><i>Form Fundamentals</i> </p>
            <fieldset>
            <legend><strong>Customer Info</strong></legend>
                <div class="box">
                   <strong>Name:</strong>  <input type="text" name="" id="" placeholder="Enter your name" autofocus required >
                    <br>
                   <strong> Telephone: </strong><input type="text" name="" id="" placeholder="Pattem 1-234-567-8910" required pattern="^(?:(?:\+|00)86)?1[3-9]\d{9}$"> 
                    <br>
                   <strong> Email address: </strong><input type="text" name="" id="" placeholder="Enter your email address" required>
                </div>
          </fieldset>
          <fieldset>
              <legend><strong>Books</strong> </legend>
              <div class="box">
                <input list="browsers">
                <datalist id="browsers" >
                    <option value="蝴蝶"></option>
                    <option value="三体"></option>
                </datalist>
                  Quantity(Maximum 5): <input type="number" name="" id="" max="5" min="1" value="1">
              </div>
          </fieldset>
          <input type="submit" value="提交">
          <div class="box">&copy; 2011 Acme United All rights resered</div>
        </form>
    </div>
</body>
</html>